<template>
	<view class="redbox">
		<view class="redMask"></view>
		<!--红包封面-->
		<view class="red_model animation-slide-bottom" :style="{height:bodyH}" v-if="rbagmodelshow==1">
			<view class="rbag_con">
				<view class="rbag_top">
					<view class="rbag_top_info">
						<image class="rbag_logo" :src="rbag_conbg" mode=""></image>
						<view class="app_name">恭喜发财，大吉大利</view>
						<view class="rbag_tips">您获得一个红包</view>
					</view>
				</view>
				<view class="open_rbag_btn" :animation="openbrnanimation" @click="openbtn()">開</view>
			</view>
		</view>
		<!--红包封面结束-->

		<!--打开红包开始-->
		<view class="red_model" :style="{height:bodyH}" v-if="rbagmodelshow==2">
			<view class="rbag_conbg">
				<image class="rbag_conbg" src="http://192.168.3.227/images/shouji/openrbag.png"></image>
				<view class="rbag_conbg open_rbag_con">
					<view class="open_title">— 恭喜您获得 —</view>
					<view class="rbag_detail">
						<view class="open_money">
							<countup :num="num" color="#c95948" width='21' height='34' fontSize='34'></countup>
							<view class="danwei">元</view>
						</view>
						<view class="open_tips">正在打款中...,请耐心等待</view>
					</view>
					<view class="lookbag_box">
						<view class="lookbag_btn">
							<view class="text" @click="lookbagbrn()">查看我的红包账户</view>
						</view>
					</view>

				</view>



			</view>
		</view>

		<view class="hide_btn" @click="hideopenbtn()" v-if="rbagmodelshow!=0 && rbagmodelshow!=3">
			<icon type="cancel" color="#fbd977" size="28" />
		</view>
		<!--打开红包结束-->

		<!--分享邀请的弹窗的开始-->
		<!-- <view class="red_model" :style="{height:bodyH}" v-if="rbagmodelshow==3">
			<view class="rbag_conbg1">
				<view class="quexiaoBox">
					<view class="">
						分享给{{redData.condition}}个好友可提现
					</view>
					<view class="quxiao-right">
						<icon type="cancel" color="white" size="28" @click="hideopenbtn()" style="quxiao" />
					</view>
				</view>
				<view class="red-model-box">
					{{redData.baomingNun}}/{{redData.condition}}
				</view>
				<button class="cu-btn bg-yellow lg shareBut" open-type="share"><text class="lg text-green cuIcon-weixin" style="font-size: 8vw;"></text>分享给微信好友</button>
			</view>
		</view> -->

		<view class="red_model" :style="{height:bodyH}" v-if="rbagmodelshow==3">
			<view class="rbag_conbg1">
				<view class="quexiaoBox">
					<view class="">
						分享给{{redData.condition}}个好友可提现
					</view>
					<view class="quxiao-right">
						<icon type="cancel" color="white" size="28" @click="hideopenbtn()" style="quxiao" />
					</view>
				</view>
				<scroll-view scroll-y="true" >
					<view class="red-model-box1">
						<view class="model-item animation-slide-right" v-for="(item,index) in redData.condition" :style="[{animationDelay: (index + 1)*0.1 + 's'}]">
							<image class="user-img" :src="userList[index].head_img_url" mode="widthFix"></image>
							
						</view>
					</view>
					
				</scroll-view>

				<button class="cu-btn bg-yellow lg shareBut" open-type="share"><text class="lg text-green cuIcon-weixin"
						style="font-size: 8vw;"></text>分享给微信好友</button>
						<view class="" style="height: 1vh;">
							
						</view>
			</view>
		</view>

		<!--分享邀请的弹窗的结束-->

	</view>
</template>

<script>
	import countup from '@/components/countUp.vue';
	export default {
		name: 'RedPack',
		props: [
			'dat'
		],
		components: {
			countup
		},
		data() {
			return {
				num: "",
				rbagmodelshow: 0,
				redData: {
					condition: 0,
					baomingNun: 0,
					amount: 0
				},
				userList:[],
				openbrnanimation: {},
				rbag_conbg: this.Reques.resDomain + "touxiang.png",
				bodyH: this.WH - this.CustomBar + 'px'
			}
		},

		methods: {
			/**
			 * 打开红包
			 * @param {Object} dat
			 */
			openRed(dat,userList) { //status 0 1 2
				this.num = (dat.amount).toFixed(2);
				let s = (dat.status == 0) ? 3 : dat.status;
				this.userList=(userList!=undefined)?userList:[];
				this.redData.condition = dat.condition;
				this.redData.baomingNun = this.dat.myInvitedOrderNum;
				this.redData.amount = dat.amount;
				this.rbagmodelshow = s;
              
			},
			/**
			 * 点击领取
			 */
			openbtn() {
				uni.showLoading({
					title: "请求中..."
				});
				this.createHong((res) => {
					uni.hideLoading();
					if (res) {
						var that = this;
						var animation = uni.createAnimation({
							duration: 1000,
							timingFunction: 'ease',
						})
						that.openbrnanimation = animation;
						animation.rotateY(360).step();
						that.openbrnanimation = animation.export();
						this.playAudio();
						this.changeS(2);
						setTimeout(function() {
							that.rbagmodelshow = 2;
							that.openbrnanimation = {};
						}, 1000);

					} else {

					}
				});


			},
			/**
			 * 改变状态的回调
			 */
			changeS(status) {

				this.$emit("changeStatus", status);
			},

			/**
			 * 红包封面 => 关闭按钮
			 */
			hideopenbtn() {
				this.rbagmodelshow = 0;
			},
			/**
			 * 查看红包
			 */
			lookbagbrn() {
				uni.navigateTo({
					url: '../../pages/component/home',
					animationType: "slide-in-right"
				});
			},
			/**
			 * 创建红包订单
			 * 
			 */
			createHong(CALLBack) {

				//创建红包订单
				let data = {
					action: 'applyForCash',
					openId: this.Reques.sessionData.data.openId,
					amount: this.redData.amount,
					condition: this.redData.condition
				};
				this.Reques.commonQuest("xcx/order.api.php", 'POST', data).then((res) => {
					console.log(res);
					if (res.statusCode == 200 && res.data.code == 0) {
						CALLBack(true);

					} else {
						CALLBack(false);
						this.Reques.tishi();
					}

				}, (err) => {
					console.log(err);
					this.Reques.tishi();
					CALLBack(false);
				});



			},

			/**
			 * 播放音频
			 */
			playAudio() {
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = this.Reques.resDomain + 'daozhan.mp3';
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});

			}


		}



	}
</script>

<style scoped>
	@import "redPack.css";
</style>
